<template>
  <div class="login">
    <div class="login_main">
      <div class="logo">
        <img src="@/assets/common/login-logo.png" alt="" />
      </div>
      <div class="account">
        <a-form layout="vertical" :model="formState" @finish="handleFinish">
          <a-form-item
            name="mobile"
            :rules="[
              { required: true, message: '必填', trigger: 'change' },
              {
                pattern:
                  /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
                message: '不符合手机号格式',
                trigger: 'change'
              }
            ]"
          >
            <a-input
              v-model:value="formState.mobile"
              placeholder="请输入手机号"
            >
              <template #prefix>
                <UserOutlined style="color: rgb(0 0 0 / 25%)" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="password"
            :rules="[
              { required: true, message: '必填', trigger: 'change' },
              { min: 6, max: 30, message: '密码长度6~30位', trigger: 'change' }
            ]"
          >
            <a-input
              v-model:value="formState.password"
              type="password"
              placeholder="请输入密码"
            >
              <template #prefix>
                <LockOutlined style="color: rgb(0 0 0 / 25%)" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit"> 登录 </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { UnwrapRef, reactive } from 'vue'
import { FormProps, message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import useStore from '@/store'
interface FormState {
  mobile: string
  password: string
}
export default defineComponent({
  name: 'Login',
  setup() {
    const { user } = useStore()

    const router = useRouter()
    const route = useRoute()
    const formState: UnwrapRef<FormState> = reactive({
      mobile: '13800000002',
      password: '123456'
    })
    const handleFinish: FormProps['onFinish'] = async (values) => {
      // console.log(values, formState)
      await user.changeToken(values)
      message.success('登录成功')
      router.push((route.query.back as string) || '/')
    }

    return {
      formState,
      handleFinish
    }
  }
})
</script>
<style scoped lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url('@/assets/common/login.jpg') no-repeat center/cover;

  .login_main {
    width: 500px;
    height: 400px;

    .account {
      margin-top: 50px;

      :deep(.ant-input) {
        height: 45px;
      }

      :deep(.ant-btn) {
        width: 100%;
        height: 60px;
      }
    }
  }
}
</style>
